<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/9/18
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="edit status"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>

<div class="content-wrapper">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.user.edit"/></h4>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <div class="form-horizontal">
                    <div id="show" class="sie-padding-top">
                        <%--<div class="row">
                            <div class="col-md-6">
                                <div class="form-group form-group-change">
                                    <label class="col-md-4 sie-left-name">Status Type:</label>

                                    <div class="col-md-8">
                                        <select data-type="type" class="form-control sie-input-border sie-input-uwh"
                                                style="padding: 2px 5px;">
                                            <option value="1">Status Type 1</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group form-group-change">
                                    <label class="col-md-4 sie-left-name">名称:</label>

                                    <div class="col-md-8">
                                        <input data-name="name" class="form-control sie-input-border sie-input-uwh">
                                    </div>
                                </div>
                                <div class="form-group form-group-change">
                                    <label class="col-md-4 sie-left-name">Value:</label>

                                    <div class="col-md-8" id = "one" data-id="values">
                                        <div style="margin-bottom:5px;" class="row_value">
                                            <input data-key="key"class="form-control sie-input-border sie-input-uwh" style="width: 50px;"><!--
                                        --><input data-value="value" class="form-control sie-input-border sie-input-uwh" style="width: 100px;vertical-align: top;"><!--
                                        --><a href="javascript:addRow('one');" class="dashes-button-lightBlue"
                                              style="vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;">
                                            <i class="fa fa-plus-circle" style="color: #41aaaa;margin-top: 6px;"></i>
                                            <span>添加</span>
                                        </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group form-group-change">
                                    <label class="col-md-4 sie-left-name">Status Type:</label>

                                    <div class="col-md-8">
                                        <select data-type="type" class="form-control sie-input-border sie-input-uwh"
                                                style="padding: 2px 5px;">
                                            <option value="2">Status Type 2</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group form-group-change">
                                    <label class="col-md-4 sie-left-name">名称:</label>

                                    <div class="col-md-8">
                                        <input data-name="name" class="form-control sie-input-border sie-input-uwh">
                                    </div>
                                </div>
                                <div class="form-group form-group-change">
                                    <label class="col-md-4 sie-left-name">Value:</label>

                                    <div class="col-md-8" id="tow" data-id="values">
                                        <div style="margin-bottom:5px;" class="row_value">
                                            <input data-key="key" class="form-control sie-input-border sie-input-uwh" style="width: 50px;"><!--
                                        --><input  data-value="value" class="form-control sie-input-border sie-input-uwh" style="width: 100px;vertical-align: top;"><!--
                                        --><a href="javascript:addRow('tow');" class="dashes-button-lightBlue"
                                              style="vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;">
                                            <i class="fa fa-plus-circle" style="color: #41aaaa;margin-top: 6px;"></i>
                                            <span>添加</span>
                                        </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>--%>
                    </div>
                    <div class="col-md-2 col-md-offset-5" style="text-align: center;margin-top: 75px;">
                        <a class="solid-button-orange" href="javascript:;" style="margin-bottom: 20px;"><spring:message code="label.admin.confirm"/></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script>
    $(document).ready(function(){
        $.ajax({
            url:"/partner/{tenant}/tenant/statusType/infoById".replace("{tenant}",getKeyByUrl()),
            type:"get",
            success:function(data){
                loadPage(data.data);
            },
            error:function(e){
                console.log(e);
            }
        });

       $(".solid-button-orange").click(function(){
          var data =  getData();
           $.ajax({
               url:"/partner/{tenant}/api/v1/state/stateSetting".replace("{tenant}",getKeyByUrl()),
               type:"post",
               contentType: "application/json;charset=utf-8",
               data:JSON.stringify(data),
               success:function(){
                 window.location.replace('/partner/{tenant}/state/settingList'.replace("{tenant}", getKeyByUrl()));
               },
               error:function(e){
                   console.log(e);
               }
           })
       })
    });

    function addRow(position) {
        var $row = $("<div></div>").addClass("row_value").attr("style", 'margin-bottom:5px;').append(
                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:50px;").attr("data-key","key")).append(
                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("style", "width:100px;vertical-align: top;").attr("data-value","value")).append(
                $("<a></a>").addClass("dashes-button-lightBlue").attr({href: "javascript:addRow(\'"+position+"\');", style: "vertical-align: top;margin: 0;padding: 0 10px;width: auto;display: inline-block;"}).append(
                        $("<i></i>").addClass("fa fa-plus-circle").attr("style", "color: #41aaaa;margin-top: 6px;")).append(
                        $("<span></span>").attr("style","margin-left:4px;").text("添加")
                )
        );

        var _this = $("#"+position).find(".row_value:last");

        $(_this).after($row);

        $(_this).find("a").attr("href","javascript:;").attr("onclick","deleteRow(this)");
        $(_this).find("a").find("span").text("删除");
    }
    function deleteRow(_this){
        $(_this).parent().remove();
    }

    function getData(){
       var a = $("#show .row .col-md-6");
        var z=[];
        $.each(a, function (index,b) {
            var x = {};
            x["type"]= $(b).find("select").val();
            x["name"]= $(b).find("input[data-name=name]").val();

            var values=[];
            var c = $(b).find("[data-id=values]").find(".row_value");
            $.each(c, function (index,d) {
                var y ={};
                y["key"] = $(d).find("[data-key=key]").val();
                y["value"] = $(d).find("[data-value=value]").val();
                values.push(y);
            });
            x["values"]=values;
            z.push(x);
        });
        return z;
    }

    function loadPage(data){
        var $div_row,size=data.length;
        $.each(data, function (index,a) {
            if(index%2==0){
                $div_row = $("<div></div>").addClass("row").attr("style","margin-bottom: 15px;border-bottom: 1px #F3E8E8 solid;");
                includePage(a,$div_row);
                if (index==size-1){
                    $("#show").append($div_row);
                }
            }else {
                includePage(a,$div_row);
                $("#show").append($div_row);
            }
        })
    }

    function includePage (s,$d){
        var $f = $("<div></div>").addClass("col-md-6").append(
                $("<div></div>").addClass("form-group form-group-change").append(
                        $("<label></label>").addClass("col-md-4 sie-left-name").text('<spring:message code="label.tenant.status.type"/>:')).append(
                        $("<div></div>").addClass("col-md-8").append(
                                $("<select></select>").addClass("form-control sie-input-border sie-input-uwh").attr({"data-type":"type","style":"padding:2px 5px;"}).append(
                                        $("<option></option>").attr("value", s.id).text(s.id))))).append(
                $("<div></div>").addClass("form-group form-group-change").append(
                        $("<label></label>").addClass("col-md-4 sie-left-name").text('<spring:message code="label.tenant.status.name"/>:')).append(
                        $("<div></div>").addClass("col-md-8").append(
                                $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr("data-name","name")))).append(
                $("<div></div>").addClass("form-group form-group-change").append(
                        $("<label></label>").addClass("col-md-4 sie-left-name").text("values:")).append(
                        loadValuesPage(s.values)
                )
        );

        $d.append($f);
    }

    function loadValuesPage(d){
        var $b = $("<div></div>").addClass("col-md-8").attr("data-id","values");
        $.each(d, function (index,a) {
            var $a = $("<div></div>").addClass("row_value").attr({"style":"margin-bottom:5px;"}).append(
                    $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr({"data-key":"key","style":"width:50px;","value": a.value,"readonly":"readonly"})).append(
                    $("<input/>").addClass("form-control sie-input-border sie-input-uwh").attr({"data-value":"value","style":"width:140px;vertical-align: top;"})
            );
            $b.append($a);
        });

        return $b;
    }
</script>

